/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  FlatList,
  Dimensions,
  TouchableOpacity,

} from 'react-native';
import Toast from 'react-native-root-toast';
var Platform = require('Platform');
var icon = require('../../src/img/tabicons/labelIcon.png');
var hospitalData = require('../../src/hospitalError.json');
// 测试无数据展示
// var hospitalData = {};

export default class HospitalTabScreen extends Component {

  constructor(props){
       super(props);
       this.state = {
           isRefreshing: false,
       };
   }

  _keyExtractor = (item,index) => {
    return "name"+index;
  }

  _showToast = (message,duration) => {
    let toast = Toast.show(message, {
      duration: Toast.durations.LONG,
      position: Toast.positions.CENTER,
      shadow: false,
      animation: true,
      hideOnPress: true,
      delay: 0,
      onShow: () => {
        // calls on toast\`s appear animation start
      },
      onShown: () => {
        // calls on toast\`s appear animation end.
      },
      onHide: () => {
        // calls on toast\`s hide animation start.
      },
      onHidden: () => {
        // calls on toast\`s hide animation end.
      }
    });
    setTimeout(function () {
      Toast.hide(toast);
    }, duration);
  }

  _header = () =>{
    return <TouchableOpacity style={styles.footerStyle}
      onPress={() => {
         this._flatList.scrollToEnd();
      }}
      activeOpacity={0.5}>
        <Text style={{fontSize: 16}}>点击到底部</Text>
    </TouchableOpacity>
   }

 _footer = () => {
    return <TouchableOpacity style={styles.footerStyle}
      onPress={() => {
         this._flatList.scrollToIndex({viewPosition:0,index:0});
        //  this._flatList.scrollToOffset({animated: true, offset: 2000});
      }}
      activeOpacity={0.5}>
              <Text style={{fontSize: 14}}>点击返回顶部</Text>
          </TouchableOpacity>
  }

 _emptyShow = () => {
    return <View style={styles.emptyDataStyle}>
              <Text style={{fontSize: 16}}>暂时无法获取到数据</Text>
          </View>
}

 _refreshing = () =>{
   this.setState({
      //复制数据源
      isRefreshing: true,
    });
    let timer =  setTimeout(()=>{
                clearTimeout(timer)
                this.setState({
                   //复制数据源
                   isRefreshing: false,
                 });
                this._showToast("刷新成功",1500);
            },1000)
 }

 _onLoad = () => {
   let timer =  setTimeout(()=>{
            clearTimeout(timer);
            this._showToast("加载成功",1000);
        },500)
 }

 _getItemLayout = (data,index)=>{
    return {length: 141, offset: (141+5) * index, index}
  }

  static navigationOptions = ({navigation, screenProps}) => {
    return{
        headerTitleStyle:(Platform.OS === 'android')?{backgroundColor: 'white',
        color: '#BD10E0',
        height: 55,
        textAlign: 'center',
        fontSize: 18,
        paddingTop: 18,
        alignSelf: 'center', }:{},
    }
  }


  render() {
    return (
      <View style={styles.container}>
        <FlatList
          ref={(flatList)=>this._flatList = flatList}
          style={styles.flatListStyle}
          data={hospitalData.hospitalList}
          keyExtractor={this._keyExtractor}
          ListFooterComponent={this._footer}
          // ListHeaderComponent={this._header}
          onRefresh={this._refreshing}
          refreshing={this.state.isRefreshing}
          onEndReachedThreshold={10}
          onEndReached={this._onLoad}
          renderItem={({item}) => <HospitalAlarmItem
            hospitalName={item.hostpital}
            key={item.level}
            hospitalUri={icon}
            hospitalAlarmLevel={item.level}
            hospitalDisConnect={item.disConnect}
            hospitalConnect={item.connect}
            hospitalConnectDevice={item.connectDevice}/>}
            ListEmptyComponent={this._emptyShow}
          />
      </View>
    );
  }
}

class HospitalAlarmItem extends Component {
  static defaultProps = {
       hospitalDisConnect: '-',
       hospitalConnect: '-',
       hospitalConnectDevice: '-',
       hospitalAlarmLevel: 4,
   };

  render(){

    var [levelText,levelColor] = this._getStyleByLevel(this.props.hospitalAlarmLevel);

    return <TouchableOpacity style={styles.itemContainer}
      onPress={() => {
        alert(this.props.hospitalName);
      }}
      activeOpacity={1}
           >
      <View style={styles.itemLeft}>
        <Text style={styles.itemLeftHospitalName}
          numberOfLines={2}
        fontWeight="bold">{this.props.hospitalName}</Text>
        <Text style={[styles.itemLeftAlarmLevel,levelColor]}>
          {levelTxt}</Text>
      </View>
      <View style={styles.itemRight}>
        <AlarmOptionInfo
          icon={icon}
          label="没有放行数: "
          value={this.props.hospitalDisConnect}/>
        <AlarmOptionInfo
          icon={icon}
          label="接入数: "
          value={this.props.hospitalConnect}/>
        <AlarmOptionInfo
          icon={icon}
          label="接入设备数: "
          value={this.props.hospitalConnectDevice}/>
      </View>
    </TouchableOpacity>
  }

   _getStyleByLevel = (level) => {
     console.log(level);
    let levelText;
    switch (level) {
      case 1:
        levelTxt = "红色警告(I)";
        levelColor = {color:'#FF0000'};
        break;
      case 2:
        levelTxt = "橙色警告(II)";
        levelColor = {color:'#E9967A'};
        break;
      case 3:
        levelTxt = "黄色警告(III)";
        levelColor = {color:'#f6e93b'};
        break;
      default:
        levelColor = {color:'#0cd51a'};
        levelTxt = "绿色警告(IV)";
    }
    return [levelTxt,levelColor];
  }
}

class AlarmOptionInfo extends Component {

  render(){
    return <View style={styles.alarmOptionContainer}>
      <Image
        resizeMode='cover'
        style= {styles.alarmOptionIcon}
        source={this.props.icon} ></Image>
      <Text style={styles.alarmOption}>{this.props.label}</Text>
      <Text sytle={styles.alarmOption}>{this.props.value}</Text>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    backgroundColor: '#FFFFFF',
  },
  flatListStyle: {
    marginTop: 5,
  },
  itemContainer: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    marginTop: 5,
    marginBottom: 5,
    borderWidth: 1,
    borderRadius: 4,
    borderColor: '#979797',
    height: 141,
  },
  itemLeft: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
    width: 170,
    height: 140,
    marginLeft: 13,
  },
  itemLeftHospital: {
    alignItems: 'center',
    marginLeft: 15,
    width: 60,
    height: 60,
  },
  itemLeftHospitalName: {
    marginTop: 5,
    textAlign: 'center',
    fontSize: 16,
  },
  itemLeftAlarmLevel: {
    marginTop: 20,
    textAlign: 'center',
    height: 30,
    fontSize: 14,
  },
  itemRight: {
    flex:1,
    alignItems: 'flex-start',
    flexDirection: 'column',
    height: 82,
    marginLeft:5,
  },
  alarmOptionContainer: {
    flex: 1,
    flexDirection: 'row',
    height: 20,
    alignItems: 'center',
  },
  alarmOptionIcon: {
    width: 13,
    height: 15,
  },
  alarmOption: {
    marginLeft: 8,
    fontSize: 13,
  },
  header_title:{
    backgroundColor: 'white',
    color: '#BD10E0',
    height: 55,
    textAlign: 'center',
    fontSize: 18,
    paddingTop: 18,
    alignSelf: 'center', // width of both buttons + no left-right padding
  },
  emptyDataStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height - 180,
  },
  footerStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: Dimensions.get('window').width - 20,
    height: 40,
    backgroundColor: '#F7F7F7',
  },
});
